.c-page-table__body-sidebar {
  position: fixed;
  left: 0;
  bottom: 0;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  width: 216px;
  height: calc(100vh - 50px - 40px - 56px);
  background: url('~@/assets/images/sidebar_bg_01.png') left bottom no-repeat, rgba(255, 255, 255);
  background-size: 216px 300px;

  .body-sidebar__title {
    flex-shrink: 0;
    padding: 16px 24px 14px;
    width: 216px;
    height: 52px;
    background: linear-gradient(180deg, #f8fbfc 0%, #ffffff 100%);
    opacity: 0.7;
    font-size: 14px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #0A1F33;
    line-height: 22px;
  }

  .body-sidebar__content {
    flex: 1;
    width: 100%;
  }

  .sidebar-content__item {
    position: relative;
    padding: 7px 24px;
    width: 216px;
    height: 36px;
    background: #ffffff;
    border-radius: 3px;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #435970;
    line-height: 22px;
    cursor: pointer;

    &::before {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      width: 3px;
      height: 0;
      background: #03ac82;
      border-radius: 3px;
      transition: height 0.3s;
    }

    &:hover {
      background: #f3f7fb;
    }
  }

  .sidebar-content__item--active {
    background: #f3f7fb;
    color: #0a1f33;

    &::before {
      height: 36px;
    }
  }
}

.c-page-table__body-sidebar--placeholder {
  width: 216px;
  flex-shrink: 0;
}